<template>
  <div class="header">
   <div class="header-left">
     <span class="iconfont">&#xe624;</span>
   </div>
   <div class="header-input">
     <span class="iconfont">&#xe632;</span>
     搜索内容
   </div>
    <router-link  to="/city">
       <div class="header-right">
         <!--{{this.city}}-->
         <!--{{this.$store.state.city}}-->
         {{this.cityAlias}}
         <!--{{this.citycomputed}}-->
         <!--{{this.getcity_}}-->
         <!--{{this.city_2}}-->
         <!--城市{{this.city}}-->
         <span class="iconfont arrow-icon">&#xe64a;</span>
       </div>
    </router-link>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import { mapGetters } from 'vuex'
export default {
  name: 'HomeHeader',
  //  data必须先写
  data () {
    return {
      city_2:this.city
    }
  },
  computed:{
    // 批量导入，同名写法一
    // ...mapState(['city'])
    //别名写法二
    // ...mapState({
    //   cityAlias: 'city'
    // })
    // 混合写法3,  localComputed是本地计算属性
    // 你依照以前的对应你就知道了state和getter对应计算属性computed,
    // actions和mutations对应方法，
    localComputed () { return '_' },
    ...mapState({
      cityAlias: 'city',
      citycomputed (state) {
        return this.localComputed+state.city + '_'
      }
    }),
    //  ...是对象展开运算符
    ...mapGetters({
      getcity_:'getcity_'
    })
  },
  props:{
    city:{
      type:String
    }
  }
}
</script>
<style lang="stylus" scoped>
  /*  没给目录取别名 */
  /*@import '~@/assets/styles/varibles.styl'*/
  /* 给目录取别名 webpack.base.conf.js  'styles': resolve('src/assets/styles'),  */
  /* 修改webpack的配置文件后，记得修改别名 */
  @import '~styles/varibles.styl'
  .header
    display:flex
    line-height:.86rem
    background: $bgColor
    color:#fff
    .header-left
      width :.64rem
      float:left
    .header-input
      /* http://www.runoob.com/cssref/css3-pr-flex.html */
      flex:1
      line-height:.64rem
      /* 还是要有一个高度，要不然显示出来别扭  */
      height:.64rem
      margin-top :.12rem
      margin-left :.2rem
      padding-left :.2rem
      background :#fff
      border-radius:.1rem
      color:#ccc
    .header-right
      color black
      /*  因为有的城市名比较长，所以使用min-width */
      min-width :1.04rem
      /*width :1.24rem*/
      float:right
      padding 0 .1rem
      text-align :center
    .arrow-icon
      margin-left :-0.04rem
      font-size :.24rem
</style>
